<script lang="ts" setup>
import { ref,onMounted,watchEffect, watch,toRaw,reactive } from 'vue'
import { useVueFlow } from '@vue-flow/core';
import { Handle, Position,useNode } from '@vue-flow/core'
import { Label } from '@/components/ui/label'
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
import { ChevronsUpDownIcon, SquarePenIcon } from 'lucide-vue-next'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import commonInputModule from '../common-input-module.vue'
import { Textarea } from '@/components/ui/textarea'
import type { NodeProps } from '@vue-flow/core'
import { LLMNodeData, LLMNodeEvents } from './index'
import storeMap from '@/pina'
defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>()
const isOpen = ref(true)
const useEndStore = storeMap.useEndStore();
const data = useEndStore.template.data;
let {title} = data;
let InputData = ref([]);

const node = useNode();
watch(data,(n,o)=>{
  InputData.value = [...toRaw(n.input)]
},{
  deep: true,
  immediate: true
})
const handleUpdateNodeData = (attrName:string,val:any)=>{
  useEndStore.updateProps(attrName,val)
  node.node.data={
    id:useEndStore.template.id,
    type:useEndStore.template.type,
    ...useEndStore.template.data
  }
}
const addNodeItem = ()=>{
    node.node.data = {
      //给node节点添加到json当中
      "id": useEndStore.template.id,
      "type": useEndStore.template.type,
      ...useEndStore.template.data
    }
}

watchEffect(() => {
  if (node.connectedEdges && node.connectedEdges.value.length > 0) {
    addNodeItem()
  }
  else{
    // useEndStore.clearData()
  }
})
const handleClickAddBtn =()=>{
 
}

</script>

<template>
  <div class="max-w-[520px] rounded-sm border border-gray-200 bg-white p-3 shadow-md">
    <Handle type="source" :position="Position.Left" />
    <div class="flex flex-col gap-y-4">
      <div class="flex justify-between">
        <div class="flex items-center gap-x-2">
          <img src="~@/assets/images/icon_End.png" class="h-4 w-4" alt="End icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-sm text-gray-500">{{title}}</p>
          </div>
        </div>
      </div>

      <span class="text-sm text-gray-500"
        >工作流的最终节点，用于在工作流运行后返回结果信息。</span>

      <div class="flex items-center justify-between gap-x-10">
        <Label class="w-40"> 选择模型</Label>
        <Select
        :model-value="useEndStore.template.data.mode"
        @update:model-value="(val)=>handleUpdateNodeData('mode',val)"
        >
          <SelectTrigger class="w-full" as="div">
            <SelectValue placeholder="选择大模型" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="1"> 返回变量，由Bot生成回答 </SelectItem>
              <SelectItem value="2"> 使用设定的内容直接回答</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>

      <div class="grid gap-y-3">
        <common-input-module v-if="InputData[0].ref" :data="InputData" title='结束' storeId="useEndStore" />
        <common-input-module v-else :data="InputData"  title='结束' storeId="useEndStore"/>
      </div>
      <div class="rounded-md bg-muted px-3 py-4">
        <Collapsible v-model:open="isOpen">
          <collapsible-trigger as-child>
            <div class="flex w-full items-center justify-between">
              <div class="flex items-center gap-x-2">
                <chevrons-up-down-icon class="h-4 w-4 cursor-pointer" />
                <p>回答内容</p>
              </div>
            </div>
          </collapsible-trigger>
          <collapsible-content class="space-y-3 space-x-3">
            <Textarea 
            :modelValue="useEndStore.template.data.content"
            @update:model-value="(val)=>handleUpdateNodeData('content',val)"
            class="mt-2 font-xs placeholder:text-xs placeholder:text-gray-400" placeholder="可以使用{{变量名}}、{{变量名.子变量名}}、{{变量名[数组索引]}}的方式引用输出参数中的变量"/>
          </collapsible-content>
        </Collapsible>
      </div>
    </div>
  </div>
</template>
